<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			{{fullName}}
			{{age}}
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					firstName: "Dell",
					LastName: "Lee",
					fullName: "Dell Lee",
					age: "28"
				},
				//监听器
				watch: {
					firstName: function() {
						console.log("计算了一次");
						this.fullName = this.firstName + " " + this.LastName;
					},
					lastName: function() {
						console.log("计算了一次");
						this.fullName = this.firstName + " " + this.LastName;
					}
				}
				//方法
				/*methods: {
					fullName: function() {
						console.log("计算了一次");
						return this.firstName + " " + this.LastName;
					}
				}*/
				//计算属性
				/*computed: {
					fullName: function() {
						console.log("计算了一次");
						return this.firstName + " " + this.LastName;
					}
				}*/
			})
		</script>
	</body>
</html>
